Implementera mörkt läge: En komplett guide med CSS och JavaScript

Mörkt läge har blivit alltmer populärt och erbjuder en bekvämare tittarupplevelse, särskilt i miljöer med svagt ljus. Denna guide ger en komplett översikt över hur du implementerar mörkt läge på din webbplats med hjälp av CSS och JavaScript, för att säkerställa en smidig och tillgänglig användarupplevelse för en global publik.

Varför implementera mörkt läge?

Det finns flera starka skäl att överväga att implementera mörkt läge:

• Förbättrad användarupplevelse: Många användare tycker att mörkt läge är skonsammare för ögonen och minskar ansträngningen, särskilt vid surfning på natten eller i svagt upplysta miljöer. Detta tillgodoser en global publik med varierande skärmanvändningsvanor och ljusförhållanden.
• Tillgänglighet: Mörkt läge kan förbättra tillgängligheten för användare med synnedsättningar eller ljuskänslighet. Genom att erbjuda ett alternativ med hög kontrast gör du din webbplats mer inkluderande.
• Batteritid: På enheter med OLED- eller AMOLED-skärmar kan mörkt läge minska strömförbrukningen och därmed förlänga batteritiden. Detta är särskilt relevant för mobilanvändare i områden med begränsad tillgång till laddningsinfrastruktur.
• Modern designtrend: Mörkt läge är en populär designtrend, och att implementera det kan få din webbplats att se modernare och mer tilltalande ut. Detta stärker varumärkesuppfattningen och användarengagemanget.

Metoder för att implementera mörkt läge

Det finns flera tillvägagångssätt för att implementera mörkt läge, var och en med sina egna för- och nackdelar. Vi kommer att utforska de vanligaste metoderna:

• CSS Media Queries (prefers-color-scheme): Denna metod känner automatiskt av användarens föredragna färgschema baserat på deras operativsystemsinställningar.
• JavaScript-växlare: Denna metod erbjuder en manuell omkopplare (t.ex. en switch eller knapp) som låter användare växla mellan ljust och mörkt läge.
• Kombinera Media Queries och JavaScript: Detta tillvägagångssätt kombinerar fördelarna med båda metoderna, ger automatisk detektering samtidigt som användare kan åsidosätta systeminställningen.

1. Implementera mörkt läge med CSS Media Queries

CSS media queryn prefers-color-scheme låter dig upptäcka användarens föredragna färgschema och tillämpa olika stilar därefter. Detta är det enklaste och mest effektiva sättet att implementera mörkt läge för användare som redan har ställt in sina systempreferenser.

Kodexempel

Lägg till följande CSS i din stilmall:

            /* Standardtema (Ljust) */
body {
  background-color: #fff;
  color: #000;
}

/* Mörkt tema */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Justera andra element vid behov */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

            

              
                Copy
              
            
          

Förklaring:

• Det första CSS-blocket definierar stilarna för standardtemat (ljust).
• Blocket @media (prefers-color-scheme: dark) tillämpar stilar endast när användarens system är inställt på mörkt läge.
• Inom @media-blocket kan du definiera stilarna för mörkt läge för olika element, såsom body-bakgrund och textfärg, rubriker och länkar.

Fördelar

• Automatisk detektering: Webbäsaren känner automatiskt av användarens preferens, vilket ger en smidig upplevelse.
• Enkel implementering: Denna metod kräver minimalt med kod och är lätt att implementera.
• Prestanda: CSS media queries hanteras effektivt av webbläsaren.

Nackdelar

• Begränsad kontroll: Användare kan inte manuellt växla mellan ljust och mörkt läge på din webbplats.
• Beroende av systeminställningar: Utseendet beror helt på användarens systeminställningar, som de kanske inte är medvetna om eller kan ändra.

2. Implementera mörkt läge med en JavaScript-växlare

Att använda en JavaScript-växlare ger användarna en manuell omkopplare för att styra webbplatsens tema. Detta ger användarna mer kontroll och låter dem åsidosätta sina systempreferenser. Detta tillvägagångssätt är avgörande för att tillgodose användare på olika enheter och plattformar som kanske inte konsekvent stöder eller exponerar systemomfattande inställningar för mörkt läge.

HTML-struktur

Lägg först till ett växlingselement i din HTML:

            <label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

            

              
                Copy
              
            
          

Detta skapar en enkel växlingsknapp med hjälp av en kryssruta och lite anpassad CSS-styling.

CSS-styling (Valfritt)

Du kan styla växlingsknappen med CSS. Här är ett exempel:

            .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rundade reglage */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

            

              
                Copy
              
            
          

JavaScript-kod

Lägg nu till följande JavaScript-kod för att hantera växlingsfunktionen:

            const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion för att växla mörkt läge
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Spara användarens preferens i localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kontrollera localStorage efter sparad preferens
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Lägg till en event listener på växlingsknappen
darkModeToggle.addEventListener('change', toggleDarkMode);

            

              
                Copy
              
            
          

Förklaring:

• Koden hämtar växlingselementet och body-elementet.
• Funktionen toggleDarkMode växlar klassen dark-mode på body-elementet.
• Koden använder localStorage för att lagra användarens preferens, så att den kvarstår mellan sessioner.
• Koden kontrollerar localStorage vid sidladdning för att tillämpa den sparade preferensen.
• En event listener läggs till på växlingsknappen, så att funktionen toggleDarkMode anropas när man klickar på den.

CSS-styling för mörkt läge (med klass)

Uppdatera din CSS för att använda klassen dark-mode för att tillämpa stilarna för det mörka temat:

            /* Standardtema (Ljust) */
body {
  background-color: #fff;
  color: #000;
}

/* Mörkt tema */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

            

              
                Copy
              
            
          

Fördelar

• Användarkontroll: Användare kan manuellt växla mellan ljust och mörkt läge på din webbplats.
• Beständighet: Användarens preferens sparas med localStorage, så den kvarstår mellan sessioner.

Nackdelar

• Mer komplex implementering: Denna metod kräver mer kod än att bara använda CSS media queries.
• JavaScript-beroende: Växlingsfunktionen är beroende av att JavaScript är aktiverat i användarens webbläsare.

3. Kombinera Media Queries och JavaScript

Den bästa metoden är ofta att kombinera CSS media queries med en JavaScript-växlare. Detta ger det bästa av två världar: automatisk detektering av användarens föredragna färgschema, samtidigt som användaren manuellt kan åsidosätta systeminställningen. Detta tillgodoser en bredare publik, inklusive de som kanske inte känner till eller kan ändra sina systemomfattande temainställningar.

Kodexempel

Använd samma HTML och CSS från exemplet med JavaScript-växlaren. Modifiera JavaScript-koden för att kontrollera systempreferensen:

            const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion för att växla mörkt läge
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Spara användarens preferens i localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kontrollera localStorage för sparad preferens, därefter systempreferens
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Lägg till en event listener på växlingsknappen
darkModeToggle.addEventListener('change', toggleDarkMode);

            

              
                Copy
              
            
          

Förklaring:

• Koden kontrollerar först localStorage för en sparad preferens.
• Om ingen preferens hittas i localStorage, kontrollerar den om användarens system föredrar mörkt läge med hjälp av window.matchMedia.
• Om systemet föredrar mörkt läge, läggs klassen dark-mode till på body, och växlingsknappen markeras.

Fördelar

• Automatisk detektering och användarkontroll: Ger både automatisk detektering och manuell kontroll.
• Beständighet: Användarens preferens sparas med localStorage.

Nackdelar

• Något mer komplex: Denna metod är något mer komplex än att använda endera metoden ensam.
• JavaScript-beroende: Beroende av att JavaScript är aktiverat.

Tillgänglighetsaspekter

När du implementerar mörkt läge är det avgörande att ta hänsyn till tillgänglighet för att säkerställa att din webbplats förblir användbar för alla användare. Kom ihåg att enbart invertering av färger inte automatiskt garanterar tillgänglighet. Här är några viktiga aspekter att tänka på:

• Färgkontrast: Säkerställ tillräcklig färgkontrast mellan text och bakgrund i både ljust och mörkt läge. Använd verktyg som WebAIM's Contrast Checker (webaim.org/resources/contrastchecker/) för att verifiera att dina färgkombinationer uppfyller tillgänglighetsstandarder. Detta är särskilt viktigt för användare med nedsatt syn.
• Fokusindikatorer: Se till att fokusindikatorer är tydligt synliga i både ljust och mörkt läge, så att användare som navigerar med tangentbord enkelt kan se vilket element som för närvarande är i fokus.
• Bilder och ikoner: Fundera på hur bilder och ikoner kommer att se ut i mörkt läge. Du kan behöva tillhandahålla alternativa versioner eller använda CSS-filter för att justera deras färger för optimal synlighet.
• Användartester: Testa din implementering av mörkt läge med användare med olika synnedsättningar för att identifiera och åtgärda eventuella tillgänglighetsproblem.

Bästa praxis för implementering av mörkt läge

Här är några bästa praxis att följa när du implementerar mörkt läge på din webbplats:

• Använd CSS-variabler (Custom Properties): CSS-variabler låter dig definiera färger och andra stilar på en central plats, vilket gör det enklare att hantera och uppdatera ditt tema.
• Testa noggrant: Testa din implementering av mörkt läge på olika enheter och webbläsare för att säkerställa konsistens.
• Erbjud en tydlig växlare: Gör växlingsknappen lätt att hitta och använda. Använd en tydlig och intuitiv ikon för att indikera dess funktion.
• Ta hänsyn till användarpreferenser: Respektera användarens preferenser och spara dem med localStorage eller cookies.
• Upprätthåll konsistens: Se till att din implementering av mörkt läge är konsekvent över hela din webbplats.

Exempel: CSS-variabler för teman

CSS-variabler gör det enkelt att växla mellan ljusa och mörka teman. Definiera variablerna i pseudo-klassen :root:

            :root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

            

              
                Copy
              
            
          

När klassen dark-mode läggs till på body, uppdateras CSS-variablerna och stilarna tillämpas automatiskt.

Slutsats

Att implementera mörkt läge kan avsevärt förbättra användarupplevelsen på din webbplats, öka tillgängligheten och till och med spara batteritid. Genom att följa teknikerna och bästa praxis som beskrivs i denna guide kan du skapa en smidig och njutbar upplevelse med mörkt läge för dina användare över hela världen.

Kom ihåg att prioritera tillgänglighet och testa din implementering noggrant för att säkerställa att din webbplats förblir användbar för alla användare, oavsett deras preferenser eller synförmåga.

Genom att implementera mörkt läge på ett genomtänkt sätt följer du inte bara en trend, utan skapar också en mer inkluderande och användarvänlig webbupplevelse för en global publik. Detta engagemang för användarupplevelsen kan i hög grad gynna din webbplats övergripande prestanda och attraktionskraft.